feat: add more kepler map export resultions resolutions - #3355
Closed
bdjulbic wants to merge 6 commits into
Closed
Conversation
Signed-off-by: bdjulbic <bdjulbic@foursquare.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Signed-off-by: bdjulbic <bdjulbic@foursquare.com>
Signed-off-by: bdjulbic <bdjulbic@foursquare.com>
…esultions-resolutions
Contributor
There was a problem hiding this comment.
Pull request overview
This PR appears intended to expand map image export “resolution” options (new fixed-size presets) and adjust export rendering (legend scaling), but it also removes/neutralizes core export sizing behavior and the ratio/resolution UI surface.
Changes:
- Replaces
RESOLUTIONSwith multiple fixed-size presets and updatesEXPORT_IMG_RESOLUTION_OPTIONS. - Removes ratio/resolution selection UI from the export image modal and trims related tests/types.
- Adds legend scaling behavior during export rendering in
PlotContainer.
Reviewed changes
Copilot reviewed 9 out of 10 changed files in this pull request and generated 10 comments.
Show a summary per file
| File | Description |
|---|---|
| test/node/utils/export-utils-test.js | Simplifies calculateExportImageSize test (currently no longer validates real sizing behavior). |
| test/node/reducers/ui-state-test.js | Updates reducer test to set legend instead of resolution. |
| test/browser/components/modals/export-image-modal-test.js | Removes ratio/resolution option assertions from modal tests. |
| src/utils/src/export-utils.ts | Replaces calculateExportImageSize implementation with a stub returning 0x0 output size. |
| src/types/reducers.d.ts | Removes ratio/resolution from ExportImage type. |
| src/reducers/src/ui-state-updaters.ts | Removes ratio/resolution from DEFAULT_EXPORT_IMAGE. |
| src/constants/src/default-settings.ts | Introduces fixed-size export resolution presets and updates resolution options list. |
| src/components/src/plot-container.tsx | Adds legend scaling via CSS variable and zoom during export. |
| src/components/src/modals/export-image-modal.tsx | Removes ratio/resolution controls from the export image modal UI. |
| docs/api-reference/reducers/ui-state.md | Updates documented DEFAULT_EXPORT_IMAGE properties (currently mismatched to code). |
Comments suppressed due to low confidence (1)
src/reducers/src/ui-state-updaters.ts:142
DEFAULT_EXPORT_IMAGEno longer setsratio/resolution, but export sizing is still derived viacalculateExportImageSize(updated)when export settings change. With the current changes, export image sizing becomes undefined/inconsistent, and the constantsEXPORT_IMG_RATIOS/RESOLUTIONSimported in this file are now unused. Either reintroduceratio/resolutioninto the default export config (and ensure they match the constants), or remove those concepts throughout the export pipeline and updatecalculateExportImageSize/selectors accordingly (also drop unused imports).
export const DEFAULT_EXPORT_IMAGE: ExportImage = {
// user options
legend: false,
mapH: 0,
mapW: 0,
imageSize: {
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
You can also share your feedback on Copilot code review. Take the survey.
Comment on lines
75
to
78
| return ( | ||
| <StyledModalContent className="export-image-modal"> | ||
| <ImageOptionList> | ||
| <div className="image-option-section"> | ||
| <div className="image-option-section-title"> | ||
| <FormattedMessage id={'modal.exportImage.ratioTitle'} /> | ||
| </div> | ||
| <FormattedMessage id={'modal.exportImage.ratioDescription'} /> | ||
| <div className="button-list" id="export-image-modal__option_ratio"> | ||
| {EXPORT_IMG_RATIO_OPTIONS.filter(op => !op.hidden).map(op => ( | ||
| <SelectionButton | ||
| key={op.id} | ||
| selected={ratio === op.id} | ||
| onClick={() => onUpdateImageSetting({ratio: op.id})} | ||
| > | ||
| <FormattedMessage id={op.label} /> | ||
| {ratio === op.id && <CheckMark />} | ||
| </SelectionButton> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| <div className="image-option-section"> | ||
| <div className="image-option-section-title"> | ||
| <FormattedMessage id={'modal.exportImage.resolutionTitle'} /> | ||
| </div> | ||
| <FormattedMessage id={'modal.exportImage.resolutionDescription'} /> | ||
| <div className="button-list" id="export-image-modal__option_resolution"> | ||
| {EXPORT_IMG_RESOLUTION_OPTIONS.map(op => ( | ||
| <SelectionButton | ||
| key={op.id} | ||
| selected={resolution === op.id} | ||
| onClick={() => op.available && onUpdateImageSetting({resolution: op.id})} | ||
| > | ||
| {op.label} | ||
| {resolution === op.id && <CheckMark />} | ||
| </SelectionButton> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| <div className="image-option-section"> |
Comment on lines
+29
to
35
| export function calculateExportImageSize({}: {}) { | ||
| return { | ||
| scale, | ||
| imageW, | ||
| imageH | ||
| scale: 1, | ||
| imageW: 0, | ||
| imageH: 0 | ||
| }; | ||
| } |
Comment on lines
+73
to
+75
| /* Apply logarithmic zoom to legend panel */ | ||
| .map-control-panel { | ||
| zoom: var(--legend-scale, 1) !important; |
Comment on lines
50
to
56
| test('exportUtils -> calculateExportImageSize', t => { | ||
| t.deepEqual( | ||
| calculateExportImageSize({ | ||
| mapW: 1400, | ||
| mapH: 990, | ||
| ratio: EXPORT_IMG_RATIOS.SCREEN, | ||
| resolution: RESOLUTIONS.ONE_X | ||
| }), | ||
| {scale: 1, imageW: 1400, imageH: 990}, | ||
| calculateExportImageSize({}), | ||
| {scale: 1, imageW: 0, imageH: 0}, | ||
| 'Should calculate the correct export image size' | ||
| ); | ||
|
|
Comment on lines
40
to
44
|
|
||
| t.equal(wrapper.find(ImagePreview).length, 1, 'should render ImagePreview'); | ||
|
|
||
| const ratioOpts = wrapper | ||
| .find('#export-image-modal__option_ratio') | ||
| .at(0) | ||
| .find(SelectionButton) | ||
| .map(c => c.text()); | ||
|
|
||
| t.deepEqual(ratioOpts, ['Original Screen', '4:3', '16:9'], 'should render correct ratio options'); | ||
|
|
||
| t.ok( | ||
| wrapper | ||
| .find('#export-image-modal__option_ratio') | ||
| .at(0) | ||
| .find(SelectionButton) | ||
| .at(0) | ||
| .props('selected'), | ||
| 'first option should be selected' | ||
| ); | ||
|
|
||
| wrapper | ||
| .find('#export-image-modal__option_ratio') | ||
| .at(0) | ||
| .find(SelectionButton) | ||
| .at(0) | ||
| .simulate('click'); | ||
| t.ok(onUpdateImageSetting.calledWith({ratio: 'SCREEN'}), 'should call update ratio'); | ||
|
|
||
| const resolutionOpts = wrapper | ||
| .find('#export-image-modal__option_resolution') | ||
| .at(0) | ||
| .find(SelectionButton) | ||
| .map(c => c.text()); | ||
|
|
||
| t.deepEqual(resolutionOpts, ['1x', '2x'], 'should render correct ratio options'); | ||
|
|
||
| t.ok( | ||
| wrapper | ||
| .find('#export-image-modal__option_resolution') | ||
| .at(0) | ||
| .find(SelectionButton) | ||
| .at(0) | ||
| .props('selected'), | ||
| 'first option should be selected' | ||
| ); | ||
|
|
||
| wrapper | ||
| .find('#export-image-modal__option_resolution') | ||
| .at(0) | ||
| .find(SelectionButton) | ||
| .at(1) | ||
| .simulate('click'); | ||
|
|
||
| t.ok(onUpdateImageSetting.calledWith({resolution: 'TWO_X'}), 'should call update resolution'); | ||
|
|
||
| t.end(); | ||
| }); |
|
|
||
| - `ratio` **[string][57]** Default: `'SCREEN'`, | ||
| - `resolution` **[string][57]** Default: `'ONE_X'`, | ||
| - `resolution` **[string][57]** Default: `'SIZE_1024_768'`, |
Comment on lines
50
to
55
| test('exportUtils -> calculateExportImageSize', t => { | ||
| t.deepEqual( | ||
| calculateExportImageSize({ | ||
| mapW: 1400, | ||
| mapH: 990, | ||
| ratio: EXPORT_IMG_RATIOS.SCREEN, | ||
| resolution: RESOLUTIONS.ONE_X | ||
| }), | ||
| {scale: 1, imageW: 1400, imageH: 990}, | ||
| calculateExportImageSize({}), | ||
| {scale: 1, imageW: 0, imageH: 0}, | ||
| 'Should calculate the correct export image size' | ||
| ); |
Comment on lines
974
to
983
| export const RESOLUTIONS = keyMirror({ | ||
| ONE_X: null, | ||
| TWO_X: null | ||
| SIZE_1024_768: null, | ||
| SIZE_1280_960: null, | ||
| SIZE_1600_1200: null, | ||
| SIZE_1920_1440: null, | ||
| SIZE_1280_720: null, | ||
| SIZE_1600_900: null, | ||
| SIZE_1920_1080: null, | ||
| SIZE_2560_1440: null | ||
| }); |
Comment on lines
+44
to
+50
| * Prevents the legend from scaling as aggressively as the exported image. | ||
| * @param scale - scale factor (e.g., 1, 2, 3, 4, 5) | ||
| * @returns remapped scale factor | ||
| */ | ||
| function remapLegendScale(scale: number): number { | ||
| const max = 5; | ||
| const t = (scale - 1) / (max - 1); |
Comment on lines
9
to
11
| import {ExportImage} from '@kepler.gl/types'; | ||
| import {StyledModalContent, SelectionButton, CheckMark} from '../common/styled-components'; | ||
| import Switch from '../common/switch'; |
bdjulbic
deleted the
feat/add-more-kepler-map-export-resultions-resolutions
branch
March 17, 2026 08:05
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.